<template>
  <div @click="visible = true">
    <slot>
      <a-input v-model="inputValue" placeholder="请选择工序组" />
    </slot>
  </div>
  <a-modal title="选择工序组" v-model:visible="visible" :width="800">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
        <a-button type="primary" @click="handlok">确认</a-button>
      </a-space>
    </template>
    <a-space>
      <a-input-search
        search-button
        v-model="searchForm.keyWord"
        :style="{ width: '220px' }"
        placeholder="工序编码"
        @change="Search"
        @search="Search"
      />
    </a-space>
    <div style="height: 20px" />
    <tableTurn
      :tableData="getDemandAll"
      :args="{
        rowSelection: {
          type: choiceType,
          showCheckedAll: true,
        },
      }"
      ref="tableRef"
    >
      <a-table-column
        title="工序组编码"
        :width="200"
        data-index="processCode"
        align="center"
      />
      <a-table-column
        title="工序组名称"
        :width="200"
        data-index="processName"
        align="center"
      />
      <a-table-column
        title="生产方式"
        data-index="productionMethod"
        :width="100"
        align="center"
      />
      <a-table-column :width="100" title="状态" align="center">
        <template #cell="{ record }">
          <a-typography-text type="success" v-if="record.state === 1">
            启用
          </a-typography-text>
          <a-typography-text type="danger" v-if="record.state === 2">
            停用
          </a-typography-text>
        </template>
      </a-table-column>
    </tableTurn>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, watch } from 'vue';
  import { TWorkSerialGroup } from '@/api/FactoryModeling/type';
  import { GetWorkSerialGroupPage } from '@/api/FactoryModeling';
  import { Message } from '@arco-design/web-vue';

  const props = withDefaults(
    //参数说明
    defineProps<{
      workSerialGroupList?: TWorkSerialGroup[]; //tab显示的tab列表
      choiceType?: 'radio' | 'checkbox';
      inputValue?: string;
    }>(),
    {
      workSerialGroupList: () => [],
      choiceType: 'radio',
    }
  );

  let searchForm = reactive<any>({});
  const getDemandAll = async (page: any) => {
    try {
      let res = await GetWorkSerialGroupPage({
        ...page,
        ...searchForm,
        type: 2,
        state: 1,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  let visible = ref(false);

  const tableRef = ref();
  const Search = () => {
    tableRef.value.loadData();
  };
  let emit = defineEmits(['choice']);

  let handlok = async () => {
    if (!tableRef.value.selectedList.length) return Message.error('请选择数据');
    visible.value = false;
    emit('choice', tableRef.value.selectedList);
  };

  watch(visible, (value) => {
    if (value) return;
    tableRef.value.selectedList = [];
    tableRef.value.selectedKeys = [];
  });
</script>

<style scoped></style>
